<template>
	<view>
		<!-- <view class="status-bar"></view> -->
		<view class="page_container">
			<view class="login_caption">
				<view calss="login_logo" style="margin: 150upx auto 0; color: #fff;text-align: center;">
					<view style="height: 24upx;">防外破App</view>
				</view>
			</view>

			<view v-if="!isLogin" class="login_wrapper">
				<view class="login_title">注册</view>
				<view class="login_panel">
					<!-- 昵称 -->
					<view class="code panel_item">
						<view :class="`panel_input ${type==4?'active':''}`">
							<input v-model="param.nickName" type='text' @focus="inputFocus('4')"
								placeholder="请输入昵称" placeholder-class="input_placeholder" />
						</view>
					</view>
					<!-- 账号 -->
					<view class="mobile panel_item">
						<view :class="`panel_input ${type==1?'active':''}`">
							<input v-model="param.userPhone" autocomplete="off" type="text" @focus="inputFocus('1')"
								placeholder="请输入手机号" placeholder-class="input_placeholder" />
						</view>
					</view>
					<!-- 密码 -->
					<view class="code panel_item">
						<view :class="`panel_input ${type==2?'active':''}`">
							<input v-model="param.passWord" :password="codeType" type='text' @focus="inputFocus('2')"
								placeholder="请输入密码" placeholder-class="input_placeholder" />
						</view>
					</view>
					<!-- 确认密码 -->
					<view class="code panel_item">
						<view :class="`panel_input ${type==3?'active':''}`">
							<input v-model="param.code" :password="codeType" type='text' @focus="inputFocus('3')"
								placeholder="请输入确认密码" placeholder-class="input_placeholder" />
						</view>
					</view>
				</view>
				<view>
					<button v-if="loginLoading == true" :loading="loginLoading"
						class="login_submitBtn loginloading">立即注册</button>
					<button v-else
						:class="`login_submitBtn noloading ${(param.userPhone!=''&&param.passWord!=''&&param.code!=''&&checkRules)?'loginVariable':''}`"
						@tap="register">立即注册</button>
					<view class="login_bottom">
						<p @click="goLogin">去登陆</p>
					</view>
				</view>
			</view>

			<view v-if="isLogin" class="login_wrapper">
				<view class="login_title">登录</view>
				<view class="login_panel">
					<!-- 账号 -->
					<view class="mobile panel_item">
						<view :class="`panel_input ${type==1?'active':''}`">
							<input v-model="param.userPhone" autocomplete="off" type="text" @focus="inputFocus('1')"
								placeholder="请输入手机号" placeholder-class="input_placeholder" />
						</view>
					</view>
					<!-- 密码 -->
					<view class="code panel_item">
						<view :class="`panel_input ${type==2?'active':''}`">
							<input v-model="param.passWord" :password="codeType" type='text' @focus="inputFocus('2')"
								placeholder="请输入密码" placeholder-class="input_placeholder" />
						</view>
					</view>
				</view>
				<view>
					<button v-if="loginLoading == true" :loading="loginLoading"
						class="login_submitBtn loginloading">登录</button>
					<button v-else
						:class="`login_submitBtn noloading ${(param.userPhone!=''&&param.passWord!=''&&checkRules)?'loginVariable':''}`"
						@tap="login">登录</button>
					<!-- <view class="login_bottom">
							<p @click="resetPassword">忘记密码？</p>
						</view> -->
					<!-- <view class="login_bottom">
						<p @click="goRegister">去注册</p>
					</view> -->
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		showToastMsg,
		verificationParams,
		cacheAndSetDeadTime
	} from '@/utils/format.js'

	export default {
		data() {
			return {
				param: {
					nickName:'',
					userPhone: '',
					passWord: '',
					code: '',

				},
				loginLoading: false,
				type: '1',
				checkRules: true,
				codeType: true,
				isLogin: true
			}
		},
		onShow() {
			// closeWebsocket()
			uni.clearStorageSync()
		},
		methods: {
			async getAuthor(){
				let author_list = []
				const res = await this.$api.getUserAuthor().catch(err=>{
					console.log(err)
				})
				if(res.code==200){
					res.data.map(v=>{
						if(v.children&&v.children.length!=0){
							v.children.map(i=>{
								author_list.push(getAuthName(i.authPerms))
							})
							
						}
						author_list.push(getAuthName(v.authPerms))
					})
					
				}
				function getAuthName(str){
					return str.replace(/:/g, '_');
				}
				uni.setStorageSync('author_list',author_list)
			},
			async login() {
				let rules = [{
						require: true,
						variable: 'userPhone',
						message: "请输入正确的手机号",
						reg: /^1[3-9]\d{9}$/
					},
					{
						require: true,
						variable: 'passWord',
						message: "请输入密码"
					},
				]
				let variable = verificationParams(this.param, rules)
				if (variable.status) {
					
					const login = await this.$api.login({
						userPhone:this.param.userPhone,
						password:this.param.passWord,
					}).catch(error => {
						console.log(error)
					})

					if (login.code==200) {
						showToastMsg("登录成功")
						uni.setStorageSync("tokenName", login.data.saTokenInfo.tokenName)
						cacheAndSetDeadTime("tokenValue", login.data.saTokenInfo.tokenValue)
						uni.setStorageSync("userInfo", login.data)
						uni.setStorageSync("isLogin", true)
						this.getAuthor()
						// this.connectSo()
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/index'
							})
						}, 1000)
					} else showToastMsg(login.message)
				}
			},
			async register() {
				let rules = [{
						require: true,
						variable: 'userPhone',
						message: "请输入正确的手机号",
						reg: /^1[3-9]\d{9}$/
					},
					{
						require: true,
						variable: 'nickName',
						message: "请输入昵称"
					},
					{
						require: true,
						variable: 'passWord',
						message: "请输入密码"
					},
					{
						require: true,
						variable: 'code',
						message: "请输入确认密码"
					}
				]
				let variable = verificationParams(this.param, rules)
				if(this.param.code!=this.param.passWord) return showToastMsg('两次密码输入不一致')
				if(variable.status ){
					const register = await this.$api.register({
						userPhone:this.param.userPhone,
						password:this.param.passWord,
						nickName:this.param.nickName,
					}).catch(err=>{
						console.log(err)
					})
					console.log(register)
					if(register.code==200){
						showToastMsg(register.msg)
						this.goLogin()
						
					}else showToastMsg(register.msg)
					
				}
				
			},
			resetPassword() {
				uni.navigateTo({
					url: '/pages/resetPassword/index'
				})
			},
			inputFocus(type) {
				this.type = type
			},
			connectSo() {
				connectWebsocket(
					// 测试地址
					'ws://183.247.176.143:9202/api/webSocket/' + uni.getStorageSync("user_id"),
					// 传递给后台的数据
					'',
					// { openexe: 'openexe' },
					// 成功拿到后台返回的数据的回调函数
					(data) => {
						if (data) {
							uni.showToast({
								title: data,
								icon: "none",
								duration: 2000
							})
						}
						console.log('成功的回调函数, 接收到的data数据: ', data)
					},
					// websocket连接失败的回调函数
					(err) => {
						console.log('失败的回调函数', err)
					}
				)
			},
			goLogin() {
				this.param = {
					nickName:'',
					userPhone: '',
					passWord: '',
					code: '',
				}
				this.isLogin = true
			},
			goRegister() {
				this.param = {
					nickName:'',
					userPhone: '',
					passWord: '',
					code: '',
				}
				this.isLogin = false
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/assets/styles/global.scss';

	.login {
		position: relative;

		&_caption {
			@include flexBoxVerticalCenter;
			align-items: initial;
			height: 100vh;
			width: 100%;
			font-size: 52upx;
			color: #14171C;
			font-weight: bold;
			// background: linear-gradient(135deg, #3373FF 11%, rgba(41, 242, 255, 0.8) 100%);
			background-image: url(@/static/login_bg.webp);
			background-repeat: no-repeat;
			background-size:cover;
		}

		&_wrapper {
			max-height: calc(100vh - 550upx);
			height: auto;
			width: 90%;
			padding: 0 52upx 52upx;
			border-radius: 32upx;
			background-color: #fff;
			position: absolute;
			left: 50%;
			top: 350upx;
			transform: translate(-50%, 0);

			/* 去掉uniapp中button自带的边框 */
			/deep/button::after {
				border: none;
			}
		}

		&_title {
			font-size: 42upx;
			color: #14171C;
			font-weight: bold;
			margin: 48upx 0 48upx;
		}

		&_panel {
			overflow: hidden;

			.panel {
				&_item {
					padding-bottom: 10upx;
					margin-bottom: 48upx;

					.panel_input {
						background: #F6F7F9;
						border-radius: 6upx;
						padding: 24upx;
						border: 2upx solid #fff;

						&.active {
							border: 2upx solid #2F6DF4;
							boxShadow: 0px 0px 8upx 1upx rgba(47, 109, 244, 0.32);
						}

						.login_icon {
							width: 36upx;
							position: absolute;
							bottom: 28upx;
							right: 32upx;
						}
					}

					text {
						color: $Theme__font;
						font-size: $Theme__font_size_title_default;
					}
				}

				&_input {
					margin-top: 8upx;
					position: relative;

					input {
						font-size: 32upx;
						color: $Theme__font_color_opration;
					}
				}
			}
		}

		&_rules {
			color: #888;
			font-size: 28upx;

			uni-navigator {
				display: inline-block;
				color: #3373FF;
			}

			&_group {
				display: flex;
				flex-direction: row;
				margin-top: 20upx;
			}
		}

		&_submitBtn {
			width: 100%;
			height: 92upx;
			line-height: 92upx;
			// margin-top: 50upx;
			border-radius: 6upx;
			color: #A1A6B0;
			padding: 0 40upx;
			text-align: center;
			font-size: 32upx;

			&.noloading {
				background-color: #E9EAEC;

				&.loginVariable {
					background-color: #2F6DF4;
					color: #fff;
				}
			}

			&.loginloading {
				background-color: #2F6DF4;
				color: #fff;
			}
		}

		&_bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			color: #14171C;
			width: 100%;
			margin-top: 24upx;

			span {
				color: rgba(68, 76, 89, 0.32);
				margin: 0 48upx;
			}
		}
	}
</style>